<!--
 * @Description:
 * @Version: 1.0
 * @Autor: haozhuang
 * @Date: 2020-04-28 14:34:17
 * @LastEditors: haozhuang
 * @LastEditTime: 2020-05-07 17:39:37
 -->
<template>
  <el-dialog
    id="addProject"
    center
    :title="addProjectData.title"
    :visible.sync="addProjectData.dialogFormVisible"
    width="700px"
    top="300px"
    @close="handleClose"
  >
    <el-form ref="ruleForm" :model="addProjectData" :rules="rules">
      <el-form-item label="项目缩略图" :label-width="formLabelWidth">
        <!-- <uploader ref="uploader" /> -->

        <el-upload
          ref="uploadThumbnail"
          :action="action"
          list-type="picture-card"
          :file-list="fileList"
          :auto-upload="false"
          :show-file-list="false"
          :on-change="handleChange"
          :on-exceed="handleExceed"
          :on-success="handleAvatarSuccess"
        >
          <el-image
            v-if="imageUrl"
            :src="imageUrl"
            class="avatar"
            fit="contain"
          >
            <div slot="error" class="image-slot">
              <img src="~@/assets/error.png" alt="">
            </div>
          </el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon" />

          <!-- <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon" /> -->
        </el-upload>
      </el-form-item>
      <el-form-item label="项目名称" :label-width="formLabelWidth" prop="name">
        <el-input v-model="addProjectData.name" autocomplete="off" />
      </el-form-item>
      <el-form-item
        label="项目描述"
        :label-width="formLabelWidth"
        prop="description"
      >
        <el-input
          v-model="addProjectData.description"
          type="textarea"
          :rows="2"
          placeholder="请输入内容"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="colseDialog">取 消</el-button>
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
      >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { mapGetters } from 'vuex'
// import uploader from '@/components/uploader'
import { addProject, updateProject } from '@/api/home'
export default {
  name: 'Home',
  components: {},
  props: {
    addProjectData: {
      type: Object,
      default: function() {
        return {
          title: '添加项目',
          dialogFormVisible: false,
          iconPath: '',
          name: '',
          ename: '',
          description: ''
        }
      }
    }
  },
  data() {
    return {
      fileList: [],
      imageUrl: null,
      formLabelWidth: '120px',
      action: '/project/update/logo/',
      rules: {
        name: [{ required: true, message: '请输入项目名称', trigger: 'blur' }]
      }
    }
  },
  computed: {},
  watch: {
    addProjectData(newData) {
      this.imageUrl = this.imageUrl
        ? this.imageUrl
        : this.getLogo('project', newData.id) || ''
    }
  },
  created() {},
  methods: {
    handleExceed(files, fileList) {
      console.log(files)
      console.log(fileList)
    },
    handleAvatarSuccess(files, fileList) {
      console.log('handleAvatarSuccess')
      this.colseDialog()
    },
    handleChange(file, fileList) {
      console.log(file)
      console.log(fileList)
      if (fileList.length > 1) {
        this.$refs.uploadThumbnail.handleRemove(fileList[0])
      }
      this.imageUrl = URL.createObjectURL(file.raw)
      this.addProjectData.iconPath = URL.createObjectURL(file.raw)
      this.$forceUpdate()
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          if (this.addProjectData.title === '添加项目') {
            this.addProject()
          } else {
            this.editProject()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
    addProject() {
      addProject({
        name: this.addProjectData.name,
        ename: this.addProjectData.ename,
        description: this.addProjectData.description
      })
        .then(result => {
          this.updatImg(result.data.id)
          console.log(result)
        })
        .catch(err => {
          console.log(err)
        })
    },
    editProject() {
      updateProject({
        id: this.addProjectData.id,
        name: this.addProjectData.name,
        ename: this.addProjectData.ename,
        description: this.addProjectData.description
      })
        .then(result => {
          console.log('-------------------------------')
          console.log(result)
          this.updatImg(this.addProjectData.id)
        })
        .catch(err => {
          console.log(err)
        })
    },
    updatImg(id) {
      if (this.$refs.uploadThumbnail.uploadFiles.length > 0) {
        // this.$refs.uploadThumbnail.$children[0].uploader.action = '/project/update/logo/' + id
        this.action =
          process.env.VUE_APP_BASE_API + '/project/update/logo/' + id
        this.$nextTick(() => {
          this.$refs.uploadThumbnail.submit()
        })
      } else {
        this.colseDialog()
      }
    },
    colseDialog() {
      this.imageUrl = null
      this.$refs.uploadThumbnail.clearFiles()
      this.$emit('colseDialog')
    },
    handleClose() {
      this.imageUrl = null
      this.$refs.uploadThumbnail.clearFiles()
      this.resetForm('ruleForm')
    }
  }
}
</script>
<style  >

#addProject .el-dialog__header {
  border-bottom: 1px solid #f5f7fa;
}

#addProject .el-button--primary {
  background-color: #3ec5ef;
  border-color: #3ec5ef;
}
#addProject .el-upload {
  width: 167.5px;
  height: 112px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
#addProject .el-upload:hover {
  border-color: #409eff;
}
#addProject .dialog-footer {
  text-align: right;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 167.5px;
  height: 112px;
  line-height: 112px;
  text-align: center;
  display: block;
}
</style>
